<template>
	<view class="page">
		<u-navbar title="流程列表" border @leftClick="$utils.back()" placeholder>
		</u-navbar>
		<view v-if="!loading" style="margin-top: 20rpx;">
			<u-alert :title="title" type="warning" :closable="closable"></u-alert>
		</view>
		<view class="body">
			<z-paging ref="paging" style="height: 100%;" :fixed="false" v-model="data" @query="query"
				:default-page-no="1" :default-page-size="10">
				<template v-if="loading">
					<view v-for="item in 15" :key="index" style="height: 88rpx;margin-top: 20rpx;" class="Skeleton">
					</view>
				</template>
				<dragSorts listHeight='100%' ref="dragSorts" :list="data" :longTouch="true" :autoScroll="true"
					:feedbackGenerator="false" :rowHeight="55" @confirm="confirm" @onclick='onclick'></dragSorts>
			</z-paging>
		</view>
		<template v-if="!loading">
			<u-button @click='addShow=true'>
				新增
			</u-button>
			<view style="height: 20rpx;" />
			<u-button type="error" @click='openDel'>
				{{!delShow?'删除':'关闭删除'}}
			</u-button>
		</template>
		<view>
			<process :ids='this.data.map(item=>item.process_id)' :show='addShow' @close='addShow=false'
				:customer_id='customer_id' @reload='$refs.paging.reload()' />
		</view>
	</view>
</template>

<script>
	import dragSorts from './components/HM-dragSorts/components/HM-dragSorts/HM-dragSorts.vue'
	import process from './components/process.vue'
	export default {
		components: {
			dragSorts,
			process
		},
		data() {
			return {
				data: [],
				customer_id: null,
				loading: true,
				closable: true,
				title: '长按图标可拖动排序',
				delShow: false,
				addShow: false,
				disabled: false
			}
		},
		onLoad(op) {
			this.customer_id = op.id
		},
		methods: {
			query(page, size) {
				this.loading = true
				let obj = {
					page,
					size
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$api_company.Decorate.Detail(this.customer_id).then(res => {
					this.$refs.paging.complete(res.data.decorate.processes.map((item, index) => {
						return {
							id: item.pivot.id,
							name: item.title,
							icon: '',
							process_id: item.id
						}
					}), true)
					setTimeout(() => {
						this.$refs.dragSorts.splice(0, this.data.length, ...this.data
							.map((item, index) => {
								return {
									id: item.id,
									name: item.name,
									icon: '',
									process_id: item.process_id
								}
							}));
						this.loading = false
					}, 500)
					uni.hideLoading()
				}).catch(err => {
					console.log(err)
					uni.hideLoading()
				})
			},
			confirm(e) {

				let obj = {
					customer_id: this.customer_id,
					process_table: "decorate_process",
					processes_ids: e.list.map((item, index) => {
						return {
							id: item.id,
							sort: index + 1
						}
					})
				}
				this.$api_company.Decorate.Process.Sort(obj)
			},
			onclick(e) {
				if (this.delShow) {
					if (this.disabled) return
					this.disabled = true
					uni.showLoading({
						title: '删除中...'
					})
					this.$api_company.Decorate.Process.Del(this.customer_id, e.row.id).then(res => {
						uni.hideLoading()
						const length = this.data.length
						this.data = this.data.filter(item => item.id != e.row.id)
						this.$refs.dragSorts.splice(0, length, ...this.data);
						this.disabled = false
					}).catch(err => {
						uni.hideLoading()
						uni.$u.toast(err.message)
						this.disabled = false
					})
				}
			},
			openDel() {
				this.delShow = !this.delShow
				if (this.delShow) {
					this.data = this.data.map(item => {
						return {
							...item,
							icon: 'https://sassimg.oss-cn-shanghai.aliyuncs.com/platform/delete.png'
						}
					})
				} else {
					this.data = this.data.map(item => {
						return {
							...item,
							icon: ''
						}
					})
				}

				this.$refs.dragSorts.splice(0, this.data.length, ...this.data);
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0rpx 20rpx;
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.body {
		flex: 1;
	}

	.processItem {
		margin-top: 20rpx;
		border-radius: 8rpx;
		background-color: #ddd;
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	::v-deep .color {
		border: none !important;
	}

	::v-deep .HM-drag-sort {
		border: none;
		box-shadow: 0 0 10rpx #ddd;
	}
</style>